:root {
    --blu-exalto: #232d60; /* Blu */
    --blu-exalto-rgb: 35, 45, 96; /* Blu in formato RGB */;
    --verde-exalto: #27ad7a; /* Verde */
}

body{
	padding-top: 80px;
}

/* Fill background, with proportionate scaling. Sources: 
  https://css-tricks.com/perfect-full-page-background-image/
  https://stackoverflow.com/questions/35669563/changing-the-opacity-of-background-image-in-css 
*/


/** Ripristino di due impostazioni di default di Chrome prima della versione 83 (83.0.4103.61 sicuro) */
button, input {
	border-color: #f0f0f0;
	border-width: 2px;
}

button:focus, input:focus {
	outline-color: #4d90fe;
}

img.bg {
  width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0.5;
  position: fixed;
  top: 60px;	/* height of upper menu */
  left: 0;
  z-index:-99;
}

.panel{
	margin: 2px 2px 2px 2px;
}

/* 2016.05.09 - Changed all #d08a2a to #FF5C06... */
/* 2016.05.10 - ... then to #F4781F */

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover, 
	.navbar-default .navbar-nav > .open > a:focus {
	color:  var(--blu-exalto); /*BACKGROUND color for active*/
	background-color: white;
}


.navbar-default {
	padding-bottom: 10px;
	background-color: white;
	border-color:var(--blu-exalto);
}


.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	color: white;
	text-decoration: none;
	background-color:  var(--blu-exalto);  /*change color of links in drop down here*/
}


.navbar-default .navbar-nav > li > a {
	color:  var(--blu-exalto); /*Change active text color here*/
}


.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
		color:  var(--blu-exalto);
}


/* do not group the following four rules */
/* source: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css */
.placehold::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   font-style: italic;
   color:    #BBB;
}
.placehold:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-style: italic;
   color:    #BBB;
   opacity:  1;
}
.placehold::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-style: italic;
   color:    #BBB;
   opacity:  1;
}
.placehold:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-style: italic;
   color:    #BBB;
}

/* ------- */

.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";	/* symbol like "V", see http://glyphicons.com/ */
    float: right;
    color: grey;
}
.panel-heading.collapsed a:after {
    content:"\e080";	/* symbol like ">", see http://glyphicons.com/ */
}

.required:after {
  content: "\00A0*";	/* \00A0 is the unicode equivalent to   Source: http://www.fileformat.info/format/w3c/htmlentity.htm */
  color: #e32; /* #e32 */
  /*font-size: 90%; */
}
.nobr { 
	white-space: nowrap;
}
.indent {
    /* serve per il testo che deve indentare quando va a capo */
    padding-left: 2em;
    text-indent: -2em;
}
.marginafter {
	margin-bottom: 20px;
}
.toggle-more {
	font-style: italic;
}
.td1 {
	padding-right: 24px;
}
.td1s {
	padding-right: 14px;
}
.td2 {
	width: 99%;
}
.td3fit {
	width: 2px;
	white-space: nowrap;
	padding-right: 14px;
}
.pad10 {
	padding: 10px;
}
.w100 {
	width: 100%;
}
.pot1 {
	font-size: 20pt;
}
.pot2 {
	font-size: 34pt;
}
.sm {
	/* Used to make an object as small as possible */
	width: 1px !important;
}
.lh1 {
	line-height: initial;
}
.spacer {
	width: 100px;
}
.spacer:after {
	content: "\00a0";
}
.border1 {
	border: 1px solid #DDDDDD;
}
.hand {
	cursor: pointer;
}
.thumbedificio {
	border: 0;
	width: 100px;
	margin-bottom: 10px;
}
.foto {
	border: 0;
	max-width: 100%;
	padding: 15px;
}
.center {
	text-align: center !important;
}
.white , .white:hover {
	color: white;
}
.green-text {
	color: #00DD00;
}
.gray-italic {
	color: #999999;
	font-style: italic;
}
.warning-text {
	font-weight: bold; 
	text-decoration: underline; 
	color: red;
}
.clickable {
	cursor: pointer;
}
.clickable:hover {
	text-decoration: underline;
}
.link {
	color: #428BCA;
}
.link:hover {
	color: #2A6496;
}
.footnote {
	white-space: nowrap;
	padding-top: 10px;
	font-style: italic;
}
.hidden {
	display: none;
}
/* La class init-hidden è utilizzata per i dati che temporaneamente sono nascosti al caricamento della pagina */
.init-hidden {
	display: none;
}
hr {
	margin-top: 7px !important;
	margin-bottom: 7px !important;
}
table.dataTable {
	border-collapse: collapse;
	width: 100% !important;
	/*overflow-x: auto; /(*) scroll (*)/ -- NON VA BENE, AD ESEMPIO SU MAPPA CLIENTE*/
	/*display: inline-block; -- NON VA BENE, AD ESEMPIO SU MAPPA CLIENTE*/
}
table.dataTable input {
	max-width: 180px;	/* serve a evitare di avere le caselle di input dentro i dataTable con width 100% */
}
.x-scrollable {
	overflow-x: auto; /* scroll */
	display: inline-block;
}

/* Necessario per risolvere un bug con il tooltip in alcuni grafici (torte) */
/* Disattivato perché è più complesso di così, servirebbe anche un colore di sfondo ma modificando il padding del parent o qualcosa del genere
.highcharts-tooltip span {
    position: relative !important;
    z-index: 9999 !important;
}
*/

/* Rimosso perché non funziona...
.btn-secondary {
	color: "#292b2c";
	background-color: "#fff";
	border-color: "#ccc";
}
*/

/** Classi per il fieldset filtri grafici */
.buttonFilter > button{
	margin: 1px;
	width: 48%;
}

.reset-this {
	all: initial;
}
.redo-fieldset {
	border: 1px solid #dddddd;
	padding : 10px;
	text-align: center;
} 
.redo-legend {
	color: #5a5a5a;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
} 

.buttons_filter{
	color: #62ABEA;
	background-color: transparent;
	background-image: none;
	height: auto;
	display: inline-block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	/* font-size: 1vw; */
	align-items: center;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;              
	user-select: none;
	/** border: 1px solid transparent; */
	padding: .375rem .75rem;
	font-size: 14px;
	border-radius: .50rem;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;

} 

.buttons_filter-active {
	background-color: #62ABEA; /* Azzurro */
	color: white;
}

.buttons_filter:hover {
	background-color: #62ABEA; /* Azzurro */
	color: white;
}

/* Pulsante di personalizzazione del periodo del filtro */
.button_filter_customize{
	margin-top: 10px;
	width: 97% !important;
}

.div_filter_customize{
	margin: 1px 0px; 
	width: 97%;
	display: inline-table;
}
.hide_filter_customize{
	visibility: hidden;
	display: inline-block;
	height: 0px;
	line-height: 0px;
	margin: 0px !important;
	border: 0px !important;
	padding: 0px !important;
	-webkit-transition-duration: 0s !important; /* Safari */
	transition-duration: 0s !important;
}

/** Tabella di riepilogo "accanto-grafico" (ad es. tCO2) - in generale.html */
.tableTab{
	font-size: 14px;
	line-height: 1.4em;
	font-style: normal;
	border-collapse: separate;
	border-spacing: 2px;
}
.tableTab th, .tableTab td {
	text-align: center;
}
.tableTab tbody th {
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #5787b6;
	background-color: #62ABEA;
	padding: 5px 10px;
	border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.tableTab thead tr th:not(:first-child) {
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #5787b6;
	background-color: #62ABEA;
	padding: 5px 10px;
	border-spacing: 2px;
	border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}
.tableTab tbody td {
	border: 1px solid #62ABEA;
}
.tableTab tbody td b{
	font-size: 16px;
}

/** Riepilogo sotto grafico * /
.tabUnderCharts > table{
	margin: 2rem 1rem 1rem 2rem;
	/* width:50%; * /
}
.tabUnderCharts th{
	text-align: left;
	padding-right: 1em; /* 25px * /
}
.tabUnderCharts td{
	text-align: right;
	padding-left: 1em; /* 10px * /
	white-space: nowrap;
}
*/

/** Tabelle di "Valori attuali" */
.val-att {
	font-size: 2em;
}

.table-val-att {
	border-collapse: separate;
}

.table-val-att th:first-of-type{
	background-color: #428BCA;
	border-width: 0px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.table-val-att th, .table-val-att tr > td{
	background-color: #62ABEA;
	color: white;
	text-align: center;
	border-width: 0px;
}

.table-val-att tr:last-of-type > td:first-of-type{
	border-bottom-left-radius: 6px;
}

.table-val-att tr:last-of-type > td:last-of-type{
	border-bottom-right-radius: 6px;
}

/** Tabelle per i badge (ad esempio "Indicatori economici") */
.badge-table{
	margin: 15px auto;
	/** Impostazioni display e overflow per evitare la sovrapposizione se la pagina viene zoomata*/
	display: block;
	overflow: auto;
}
.badge-label-blue{
    padding: 10px;
    padding-right: 20px;
    line-height: 1.2em;
    text-align: left;
    color: white;
    background-color: #428BCA;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.badge-value-blue{
    padding: 10px;
    font-size: 22px;
    text-align: right;
    background-color: #C9E2F8;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.badge-label-green{
    padding: 10px;
    padding-right: 20px;
    line-height: 1.2em;
    text-align: left;
    color: white;
    background-color: #51B051;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.badge-value-green{
    padding: 10px;
    font-size: 22px;
    text-align: right;
    background-color: #90EE90;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/** Tabella Gruppi */
#tableGruppi{
	padding-top: 30px; 
	min-width: 80%;
	margin: 0px auto;                      
	float: none;
	/* box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); */
}

/** Titolo (e.g.: Consumo attuale) 
RIMOSSO
#tableGruppiTit th{
	font-size: 18px;
	line-height: 2em;
	background-color: #62ABEA;
	color: white;
	border-bottom: 1px solid #ddd; 
	text-align: center;
}
*/

/** Titoli di colonna (e.g.: Impianti, Potenza attiva, etc.) */
#tableGruppiCol > th{
	font-size: 16px;
	line-height: 2em;
	background-color: #62ABEA;
	color: white;
	border: 1px solid #ddd;
	border-top-width: 0px;
	text-align: center;
}

/** Dati tabella */
#tableGruppiBody td:first-of-type {		
	text-align: center;
	padding-right: 0px;
}
#tableGruppiBody td {		
	font-size: 13px;
	line-height: 3em;
	color: black;
	border: 1px solid #ddd;
	text-align: right;
	padding-right: 10px;
}

/** Dati tabella hover */
#tableGruppiBody > tr:hover {
	background-color: #9ECCF2;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

/** Riga totali */
#tableGruppiTot > tr > th {
	font-size: 16px;
	line-height: 2em;
	background-color: #62ABEA;
	color: white;
	text-align: right;
	padding-right: 10px;
}
#tableGruppiTot > tr > th:first-of-type {
	text-align: center;
	padding-right: 0px;
}

/** Bordi arrotondati tabella */
#tableGruppi > thead > tr:first-of-type > th:first-of-type{
	border-top-left-radius: 6px;
	border-left-width: 0px;
}
#tableGruppi > thead > tr:first-of-type > th:last-of-type{
	border-top-right-radius: 6px;
	border-right-width: 0px;
}
#tableGruppiTot tr:last-of-type > th:first-of-type{
	border-bottom-left-radius: 6px;
}
#tableGruppiTot tr:last-of-type > th:last-of-type{
	border-bottom-right-radius: 6px;
}


/** Tabella Device */
#tableDevices{
	padding-top: 30px; 
	min-width: 80%;
	margin: 0px auto;                      
	float: none;
	/* box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
	-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); */
}


/** Titoli di colonna (e.g.: Impianti, Potenza attiva, etc.) */
#tableDevicesCol > th{
	font-size: 16px;
	line-height: 2em;
	background-color: #62ABEA;
	color: white;
	border: 1px solid #ddd;
	border-top-width: 0px;
	text-align: center;
}

/** Dati tabella */
#tableDevicesBody td:first-of-type {		
	text-align: center;
	padding-right: 0px;
}
#tableDevicesBody td {		
	font-size: 13px;
	line-height: 3em;
	color: black;
	border: 1px solid #ddd;
	text-align: right;
	padding-right: 10px;
}

/** Dati tabella hover */
#tableDevicesBody > tr:hover {
	background-color: #9ECCF2;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

/** Riga totali */
#tableDevicesTot > tr > th {
	font-size: 16px;
	line-height: 2em;
	background-color: #62ABEA;
	color: white;
	text-align: right;
	padding-right: 10px;
}
#tableDevicesTot > tr > th:first-of-type {
	text-align: center;
	padding-right: 0px;
}

/** Bordi arrotondati tabella */
#tableDevices > thead > tr:first-of-type > th:first-of-type{
	border-top-left-radius: 6px;
	border-left-width: 0px;
}
#tableDevices > thead > tr:first-of-type > th:last-of-type{
	border-top-right-radius: 6px;
	border-right-width: 0px;
}
#tableDevicesTot tr:last-of-type > th:first-of-type{
	border-bottom-left-radius: 6px;
}
#tableDevicesTot tr:last-of-type > th:last-of-type{
	border-bottom-right-radius: 6px;
}

/** Allinea a sinistra tutti i titoli dei Panels */
.panel-heading  a{
	text-align: left;
}

/** Indicatori tecnici o economici */
.label-indicatori {
	text-align: center; 
	font-size: 18px;
	padding: 10px;
	line-height: 1.2em;
}

/** Titolo per le mappe (Edifici, cabine) */
.titleMap{
	font-size: 16pt;
	text-align: center;
}

/** Stile per i gauges (indicatori tipo tachimetro) */
.gaugeClass{
	width: 300px; 
	height: 200px;
	margin: 0 auto;
}

/** Correzione dell'allineamento per il glyphicon con il calendarietto */
.glyphicon-calendar{
	position: static;
}